<template>
	<view class="container">
		<tui-navigation-bar :isOpacity="false" :maxOpacity="1" @init="initNavigation" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="question">
				<view class="question-header">
					<view class="title">问题反馈</view>
					<view class="count">{{ getCount }}/{{ maxlen }}</view>
				</view>
				<uv-textarea v-model="innerValue" class="question-textarea" border="none"
					placeholderStyle="font-size: 26rpx;font-weight: 400;color: #999B9B;line-height: 37rpx;"
					placeholder="请填写10字以上的问题描述以便我们提供更好的帮助" :maxlength="200"></uv-textarea>
			</view>
			<view class="question picture">
				<view class="question-header">
					<view class="title">图片（选填，提供问题截图）</view>
					<view class="count">{{ getCountPicture }}/4</view>
				</view>
				<view class="picture-list">
					<view class="picture-item" v-for="(item,index) in pictureList" :key="index">
						<image class="picture-image" :src="item._url" mode="widthFix"></image>
						<image @tap="removeImg(item)" class="close"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/closeicon30.png"
							mode="widthFix"></image>
					</view>
					<view class="add-image" v-show="pictureList.length < 4" @tap.stop.prevent="onUpdateAvatar">
						<image class="camera"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/camera.png"
							mode=""></image>
						<view class="title">上传照片</view>
					</view>
				</view>
			</view>
			<view class="question phon">
				<view class="question-header">
					<view class="title">联系方式（选填）</view>
					<view class="count"></view>
				</view>
				<uv-input customStyle="background-color: #fff;padding: 28rpx;" class="phone"
					placeholderStyle="font-size: 26rpx;font-weight: 400;color: #999B9B;line-height: 37rpx;"
					placeholder="手机号码，用于与你联系" border="none" type="number" v-model="phoneValue"></uv-input>
			</view>
		</view>
		<view class="submit" @tap="submit">
			提交
		</view>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import {
		ServiceRecord
	} from "@/utils/requset/api.js";
	const app = getApp();

	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '反馈意见', //标题
				maxlength: 200,
				innerValue: '', // 反馈理由
				phoneValue: '',
				pictureList: [],
				pictures: []
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			maxlen() {
				return this.maxlength < 0 ? this.maxlength < 0 ? -1 : 140 : this.maxlength;
			},
			getCountPicture() {
				return this.pictureList.length;
			},
			getCount() {
				try {
					return this.innerValue.length > this.maxlen ? this.maxlen : this.innerValue.length;
				} catch (e) {
					return 0;
				}
			},
		},
		onLoad(options) {},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {

			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			submit() {
				if (this.innerValue.length < 10) {
					this.$refs.toast.show({
						type: 'default',
						message: "请填写最少十个字的反馈意见"
					});
					setTimeout(() => {
						this.$refs.toast.hide();
					}, 1000)
					return
				}
				if (!this.innerValue.trim()) {
					this.$refs.toast.show({
						type: 'default',
						message: "请填写反馈意见"
					});
					setTimeout(() => {
						this.$refs.toast.hide();
					}, 1000)
				} else {
					ServiceRecord({
						data: {
							content: this.innerValue,
							pictures: this.pictureList,
							userMobile: this.phoneValue,
						}
					}).then((res) => {
						if (res.code === 0 || res.code === 200) {
							this.innerValue = "";
							this.pictureList = [];
							this.phoneValue = "";
							this.$refs.toast.show({
								type: 'success',
								message: res.msg || res.message
							});
							setTimeout(() => {
								this.$refs.toast.hide();
							}, 1000)
						}
					})
				}
			},
			//删除图片
			removeImg(item) {
				// console.log(item);
				this.pictureList = this.pictureList.filter((it) => it != item);
			},
			//添加图片
			onUpdateAvatar: function(e) {
				const _this = this
				uni.chooseImage({
					count: 4,
					success: (res) => {
						_this.$refs.toast.show({
							type: 'loading',
						})
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							app._uploadImage(tempFilePaths[i], {
								bizType: 'avatar',
								bucket: 'pengtou-1322587508',
								storageType: 'TENCENT_COS'
							}, res => {
								// console.log(res);
								_this.pictureList.push({
									fileSuffix: res.suffix,
									fileType: res.fileType === "IMAGE" ? 1 : 2,
									fileUrl: res.path,
									_url: tempFilePaths[i],
								})
								if (tempFilePaths.length - 1 == i) {
									_this.$refs.toast.hide()
								}
							}, msg => {
								_this.$refs.toast.hide()
								app.showToast(msg)
							})
						}
					}
				})
			},
			//浏览商品图片
			onPreviewImages(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls
				});
			},
			//移除图片
			moveImg(index) {
				this.imgArr.splice(index, 1);
				this.imgList.splice(index, 1);
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.submit {
			text-align: center;
			position: fixed;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 60rpx;
			width: 596rpx;
			height: 102rpx;
			line-height: 102rpx;
			color: #A7F517;
			background: #0E0E0D;
			border-radius: 20rpx;
			font-size: 32rpx;

		}

		.main {

			box-sizing: border-box;
			padding: 171rpx 24rpx 66rpx;

			.question {
				margin-top: 36rpx;

				.question-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.phone {
						background-color: #fff;
					}

					.title {
						font-size: 26rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 37rpx;
					}

					.count {
						font-size: 26rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 37rpx;
					}
				}

				.question-textarea {
					box-sizing: border-box;
					padding: 28rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					border: none;
				}
			}

			.picture {}

			.picture-list {
				box-sizing: border-box;
				padding: 28rpx;
				width: 100%;
				// height: 238rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.picture-item {
					width: 180rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					position: relative;

					.close {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						width: 20rpx;
					}

					.picture-image {
						width: 100%;
						height: 100%;
						border-radius: 10px;
					}
				}

				.add-image {
					width: 180rpx;
					height: 180rpx;
					background: #F6F8F7;
					border-radius: 20px;
					border: 2rpx dashed #C4CFCA;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.camera {
						width: 62rpx;
						height: 62rpx;
						margin-bottom: 6rpx;
					}

					.title {
						font-size: 24rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 44rpx;
					}
				}
			}
		}
	}
</style>